<template>
	<view class="order-container" :data-theme="themeStyle">
		<mescroll-uni ref="mescroll" @getData="getListData">
			<block slot="list">
				<block v-if="orderList.length">
					<view class="order-item" v-for="(orderItem, orderIndex) in orderList" :key="orderIndex" @click="detail(orderItem)">
						<view class="order-header">
							<text class="ns-text-color-gray ns-font-size-sm">{{ orderItem.order_no }}</text>
							<!-- <text class="ns-text-color ns-font-size-sm">{{ orderItem.order_status == 0 ? '待支付' : (orderItem.order_status == 1 ? '已完成' : (orderItem.order_status == -1 ? '已关闭' : '')) }}</text> -->
						</view>
						<view class="order-body">
							<block class="" v-if="orderItem.type == 2">
								<image :src="$util.img(orderItem.exchange_image)?$util.img(orderItem.exchange_image):$util.img('upload/uniapp/point/coupon.png')" @error="imageError(orderIndex)" mode="aspectFill" :lazy-load="true"></image>
							</block>
							<block class="" v-else-if="orderItem.type == 3">
								<image :src="$util.img(orderItem.exchange_image)?$util.img(orderItem.exchange_image):$util.img('upload/uniapp/point/hongbao.png')" @error="imageError(orderIndex)" mode="aspectFill" :lazy-load="true"></image>
							</block>
							<block v-else>
								<image :src="$util.img(orderItem.exchange_image)" @error="imageError(orderIndex)" mode="aspectFill" :lazy-load="true"></image>
							</block>
							<view class="goods-name">
								<view class="name">{{ orderItem.exchange_name }}</view>
								<!-- <view class="guig">规格规格</view> -->
								<view class="num"><text class="iconfont iconclose"></text>{{ orderItem.num }}</view>
							</view>
							<view class="goods-total">-{{ orderItem.point }}积分</view>
						</view>
						<!-- <view class="order-footer" v-if="orderItem.order_status==0 && orderItem.type==1">
							<view class="order-opection" @click.stop="orderClose(orderItem.order_id,orderIndex)">
								<view class="order-box-btn">关闭</view>
							</view>
							<view class="order-opection" @click.stop="orderPay(orderItem.out_trade_no)">
								<view class="order-box-btn ns-border-color ns-text-color">支付</view>
							</view>
						</view> -->
					</view>
				</block>
				<block v-if="showEmpty&&!orderList.length">
					<view class="cart-empty">
						<ns-empty :isIndex="!1" :text="$lang('emptyTips')"></ns-empty>
					</view>
				</block>
			</block>
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-show-toast></ns-show-toast>
	</view>
</template>

<script>
import globalConfig from '@/common/js/golbalConfig.js';
import nsShowToast from '@/components/ns-show-toast/ns-show-toast.vue'
export default {
	data() {
		return {
			orderList: [],
			showEmpty:false
		};
	},
	components: {
		nsShowToast
	},
	onLoad() {},
	onShow() {
		// 刷新多语言
		this.$langConfig.refresh();
		if (this.$refs.mescroll) this.$refs.mescroll.refresh();

		if (!uni.getStorageSync('token')) {
			this.$util.redirectTo('/pages/login/login/login', { back: '/promotionpages/point/order_list/order_list' });
		}
	},
	mixins:[globalConfig],
	methods: {
		getListData(mescroll) {
			this.showEmpty=false;
			this.$api.sendRequest({
				url: '/pointexchange/api/order/page',
				data: {
					page: mescroll.num,
					page_size: mescroll.size
				},
				success: res => {
					this.showEmpty=true;
					let newArr = [];
					let msg = res.message;
					if (res.code == 0 && res.data) {
						newArr = res.data.list;
					} else {
						this.$util.showToast({ title: msg });
					}
					mescroll.endSuccess(newArr.length);
					//设置列表数据
					if (mescroll.num == 1) this.orderList = []; //如果是第一页需手动制空列表
					this.orderList = this.orderList.concat(newArr); //追加新数据
					console.log(this.orderList)
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res => {
					mescroll.endErr();
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		orderClose(order_id,index){
			uni.showModal({
				title: '提示',
				content: '确定关闭此次兑换？',
				success: (res)=>{
					if (res.confirm) {
						this.$api.sendRequest({
							url: '/pointexchange/api/order/close',
							data: {
								order_id:order_id
							},
							success: res => {
								console.log(res);
								if(res.code>=0){
									this.orderList[index].order_status=-1;
									this.$util.showToast({ title: '关闭成功' });
									this.$forceUpdate();
								}
							}
						});
					}
				}
			});
			
		},
		orderPay(e){
			this.$util.redirectTo('/pages/pay/index/index',{code:e})
		},
		detail(item) {
			this.$util.redirectTo('/pages/order/detail_point/detail_point',{order_id:item.order_id});
		},
		shopDetail(item){
			this.$util.redirectTo('/promotionpages/point/detail/detail',{id:item.exchange_id});
		},
		imageError(index) {
			this.orderList[index].exchange_image = this.$util.getDefaultImage().default_goods_img;
			this.$forceUpdate();
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .fixed{position: relative;top:0}
/deep/ .empty{padding-top:0 !important}
.cart-empty{position:relative;top: 50%;padding-top: 154px !important;}
.order-container {
	width: 100vw;
	height: 100vh;
}
.align-right {
	text-align: right;
}
.order-item {
	width: 702rpx;
	margin: 0 auto;
	padding: 24rpx;
	box-sizing: border-box;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	line-height: 1;
	background: #fff;
	margin-top: 18rpx;

	.order-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		font-size: $ns-font-size-x-sm;
		color: #A9A9A9;
		border-bottom: 1px solid #F1F1F1;
		padding-bottom: 20rpx;

		& > view {
			flex: 1;
		}
	}

	.order-body {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		box-sizing: border-box;
		image {
			width: 96rpx;
			height: 96rpx;
			border-radius: 5rpx;
		}
		.goods-name {
			width: 60%;
			height: 96rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 19rpx;
			line-height: 1;
			.name {
				font-size: $ns-font-size-sm;
				color: #000;
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				line-height: 30rpx;
			}
			.guig {
				font-size: $ns-font-size-x-sm;
				line-height: 1;
				margin-top: 13rpx;
				color: #838383;
			}
			.num {
				font-size: $ns-font-size-x-sm;
				color: #383838;
				line-height: 1;
				margin-top: 13rpx;
				text {
					font-size: $ns-font-size-x-sm;
					color: #383838;
					line-height: 1;
				}
			}
		}
		.goods-total {
			flex: 1;
			font-size: $ns-font-size-sm;
			color: #000;
			text-align: right;
		}
	}
	.order-footer{
		text-align: right;
		padding-top: 20rpx;
		border-top: 1px solid #F1F1F1;
		
		.order-opection{
			display: inline-block;
		}
		
		.operation-btn {
			line-height: 1;
			padding: 14rpx 20rpx;
			color: #333;
			display: inline-block;
			border-radius: 28rpx;
			background: #fff;
			border: 0.5px solid #999;
			font-size: $ns-font-size-base;
			margin-left: 10rpx;
		}
	}
}

.empty {
	padding-top: 200rpx;
	text-align: center;

	.empty-image {
		width: 180rpx;
		height: 180rpx;
	}
}
</style>
